<template>
	<view class="app">
		<text class="back-btn iconfont icon-close" @click="uni.navigateBack({
			delta:1
		})">
		</text>
		<view class="centerBig">
			<img src="https://static.jeecg.com/upload/test/login4_1595818039175.png" style="width:80px;height: 80px;">
			<view class="center">
				JEECG BOOT
			</view>
		</view>

		<!-- 手机验证码 -->
		<u-form class="form" :model="form" ref="uForm">
			<u-form-item :label="codeBool?'手机号':'账号'" prop="name" :left-icon="codeBool?'phone-fill':'account-fill'"
				label-width="150">
				<u-input v-model="form.name" v-show="!codeBool" />
				<u-input v-model="form.phone" placeholder="请输入手机号" type="text" v-show="codeBool" />
			</u-form-item>
			<u-form-item :label="codeBool?'验证码':'密码'" prop="pwd" left-icon="lock-fill" label-width="150">
				<u-input v-model="form.pwd" type="password" v-show="!codeBool" />
				<u-input v-model="form.code" placeholder="请输入验证码" type="text" v-show="codeBool" />
				<u-button v-show="codeBool" size="mini" slot="right" type="success" :disabled="form.phone.length==0">
					获取验证码</u-button>
			</u-form-item>
			<u-form-item>
				<u-button style="width: 35%;" type="primary" @click="Login">登录</u-button>
				<u-button style="width: 35%;" @click="codeLogin" type="primary" :plain="true">{{codeBool?'账号登陆':'短信登录'}}
				</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import api from '@/api/api.js'

	export default {

		data() {
			return {
				form: {
					name: 'jeecg',
					pwd: '123456',
					phone: "",
					code: "",
				},
				codeBool: false, //是否为验证码登录
				loading: false, //登录中
				rules: {
					name: [
						// 对mobile字段进行必填验证
						{
							required: true,
							message: '请填写账号',
							trigger: ['change', 'blur']
						},
					],
					pwd: [
						// 对pwd字段进行长度验证
						{
							min: 5,
							message: '密码不能少于5个字',
							trigger: 'change'
						},
						// 对pwd字段进行必填验证
						{
							required: true,
							message: '请填写密码',
							trigger: ['change', 'blur']
						},
					]
				}
			}
		},
		methods: {
			Login() {
				this.$refs.uForm.validate(valid => {
					console.log("点击登录");
					if (valid) {
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						console.log("成功");
						// 封装数据
						let obj = {
							username: this.form.name,
							password: this.form.pwd,
						}
						console.log(obj, "请求登录接口");
						// 请求登录接口
						api.setlogin(obj).then(res => {
							// 判断请求接口是否成功
							if (res.code == 200) {
								// 将获取回来的token以及用户信息值存储至本地
								uni.setStorageSync("token", res.result.token)
								uni.setStorageSync("userInfo", res.result.userInfo)
								// 跳转首页
								uni.switchTab({
									url: "/pages/index/index"
								})
								uni.hideLoading() //关闭loading加载效果
							}
						})
					} else {
						console.log('验证失败');
						return false;
					}
				});
			},
			// 点击验证码登录
			codeLogin() {
				this.codeBool = !this.codeBool
			},
			//h5登录
			async login() {
				// 协议
				const {
					mobile,
					code
				} = this
				if (!this.$util.checkStr(mobile, 'mobile')) {
					this.$util.msg('请输入有效手机号码')
					return
				}
				if (!this.$util.checkStr(code, 'mobileCode')) {
					this.$util.msg('验证码输入错误')
					return
				}

				//调用接口
				this.loading = true
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				const res = await api.login({
					mobile,
					code
				})
				this.loading = false
				uni.hideLoading()

				if (res.code === 20000) {
					this.loginSuccessCallBack(res.data)
				} else {
					this.$util.msg(res.message)
				}
			},

			// 登录成功操作 vuex 
			loginSuccessCallBack(data) {
				this.$util.msg('登录成功')
				// 状态管理保存用户信息
				// this.$store.commit('setToken', data)
				uni.setStorageSync('userInfo', data.userInfo)
				uni.setStorageSync('mxgEducationToken', data.access_token)

				setTimeout(() => {
					uni.switchTab({
						url: '/pages/my/index'
					})
				}, 500)

			},

			// 第3方授权登录-这里是静默登录(不需要用户头像的),通过uni.login获取code码，调用自己接口，传入code或者appid这些，后台给你真正token
			toProviderLogin(provider) {
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(108, res.provider)
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log('微信登录', loginRes);
									let {
										code
									} = loginRes
									//调用自己接口
									api.loginByProvider({
										code
									}).then(res2 => {
										console.log('token成功', res2);
										//登录成功
										if (res2.code === 20000) {
											uni.showToast({
												'title': res2.message
											})

											uni.setStorageSync('mxgEducationToken', res2
												.data.access_token)
											uni.setStorageSync('userInfo', res2.data
												.userInfo)

											uni.switchTab({
												'url': '/pages/my/index'
											})
										}
									})


								}
							});
						}
					}
				});

			},

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.app {
		padding-top: 50rpx;
	}

	.centerBig {
		width: 100%;
		height: 250px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	// 中间LOGO区域
	.center {
		margin-top: 20px;
		width: 100%;
		font-size: 25px;
		text-align: center;
	}

	// 表单区域
	.form {
		width: 80%;
		margin: 0 auto;
	}

	/* 关闭按钮 */
	.back-btn {
		position: absolute;
		left: 20rpx;
		top: 50rpx;
		z-index: 90;
		padding: 20rpx;
		font-size: 39rpx;
		color: #606266;
		display: none;
	}

	.left-top-sign {
		font-size: 120rpx;
		color: #f8f8f8;
	}

	.welcome {
		position: relative;
		top: -90rpx;
		padding-left: 60rpx;
		font-size: 46rpx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.row {
			width: 100%;
		}

		.tit {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 26rpx;
			color: #606266;
		}

		input {
			flex: 1;
			height: 60rpx;
			font-size: 30rpx;
			color: #303133;
			width: 100%;
		}
	}

	button[type=primary] {
		background-color: #345dc2 !important;
	}

	.button-hover[type=primary] {
		background-color: #345dc2 !important;
	}

	/* 其他登录方式 */
	.other-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		margin-top: 80rpx;

		.weixin {
			border: 0;
		}

		.line {
			margin-bottom: 40rpx;

			.tit {
				margin: 0 32rpx;
				font-size: 24rpx;
				color: #606266;
			}

			&:before,
			&:after {
				content: '';
				width: 160rpx;
				height: 0;
				border-top: 1px solid #e0e0e0;
			}
		}

		.icon {
			width: 80rpx;
			height: 80rpx;
			margin: 0 50rpx;
		}
	}

	.agreement {
		position: absolute;
		left: 0;
		bottom: 10rpx;
		width: 750rpx;
		height: 90rpx;
		font-size: 24rpx;
		color: #999;

		.iconfont {
			font-size: 36rpx;
			color: #ccc;
			margin-right: 8rpx;

			&.active {
				color: blue;
			}
		}

		.tit {
			color: #40a2ff;
		}
	}
</style>
